<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑预算设备</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
        <div style="margin: 20px 0">
          <el-form ref="form" :model="editForm" label-width="80px">
            <el-form-item label="品牌名称">
              <el-input v-model="editForm.brandName" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="类目ID">
              <el-input v-model="editForm.categoryId" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="文章图片">
              <el-upload
                action="/oss/img"
                :file-list="fileList"
                list-type="picture-card"
                name="object"
                :on-success="uploadSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"/>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImg" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item label="类目名称">
              <el-input v-model="editForm.categoryName" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="商品ID">
              <el-input v-model="editForm.goodsId" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="	SKU名称">
              <el-input v-model="editForm.name" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="	优惠金额">
              <el-input v-model="editForm.preMoney" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="	价格">
              <el-input v-model="editForm.price" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="	规格">
              <el-input v-model="editForm.spec" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editSubmit">确 定</el-button>
              <el-button @click="back">取 消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { editEquipmentList, queryEquipmentList } from '@/api/equipment'

export default {
  name: 'editRecommendProject',
  data() {
    return {
      editForm: {},
      // 上传图片数据
      fileList: [],
      dialogVisible: false,
      dialogImg: '',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //获取方案设备信息
    getData(){
      const id=this.$route.query.id
       queryEquipmentList(id).then(res=>{
         this.editForm=res.data
         res.data.images.split(',').forEach(imgUrl=>{
           if(imgUrl !==''){
             this.fileList.push({url:imgUrl})
           }
         })
      })
    },
    //  图片上传成功时的回调
    uploadSuccess(file, fileList) {
      this.fileList.push({ url: fileList.response.data })
    },
    // 移除上传图片数据
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImg = file.url
    },
    back() {
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.push('/offer/equipment')
    },
    //提交编辑信息
    editSubmit(){
      editEquipmentList({
        brandName:this.editForm.brandName,
        categoryId:this.editForm.categoryId,
        categoryName:this.editForm.categoryName,
        goodsId:this.editForm.goodsId,
        images:this.fileList.map(item=>item.url).join(','),
        name:this.editForm.name,
        preMoney:this.editForm.preMoney,
        price:this.editForm.price,
        spec:this.editForm.spec
      }).then(res=>{
        this.$message.success('更新成功')
        this.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
</style>
